/**
 * 门店详情弹窗
 */
import React from 'react';
import { X, Store, TrendingUp, CalendarDays } from 'lucide-react';
import EnhancedMetricCard from './EnhancedMetricCard';
import AnimatedLineChart from '../charts/AnimatedLineChart';

interface StoreDetail {
  rank: number;
  name: string;
  visitors: string;
  rate: string;
  address?: string;
  sales?: number;
  orders?: number;
  // 模拟更多数据
  dailyVisitors?: { date: string; count: number; sales: number }[];
}

interface StoreDetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  store: StoreDetail | null;
}

const StoreDetailModal: React.FC<StoreDetailModalProps> = ({ isOpen, onClose, store }) => {
  if (!isOpen || !store) return null;

  // 模拟访客趋势数据
  const visitorTrendData = store.dailyVisitors || Array.from({ length: 7 }, (_, i) => {
    const date = new Date();
    date.setDate(date.getDate() - (6 - i));
    return {
      date: `${date.getMonth() + 1}-${date.getDate()}`,
      count: Math.floor(Math.random() * 100) + 200,
      sales: Math.floor(Math.random() * 50000) + 100000
    };
  });

  // 转换为图表数据格式
  const chartData = visitorTrendData.map(item => ({
    date: item.date,
    visitors: item.count,
    sales: item.sales
  }));

  const getRankBadge = (rank: number) => {
    const baseClasses = "w-10 h-10 rounded-full flex items-center justify-center text-lg font-bold text-white";
    switch (rank) {
      case 1:
        return `${baseClasses} bg-yellow-500`;
      case 2:
        return `${baseClasses} bg-gray-400`;
      case 3:
        return `${baseClasses} bg-orange-400`;
      default:
        return `${baseClasses} bg-blue-500`;
    }
  };


  return (
    <div
      className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
      onClick={onClose}
    >
      <div
        className="bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/20 rounded-2xl shadow-2xl w-full max-w-5xl max-h-[85vh] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-200 border border-gray-200/50"
        onClick={(e) => e.stopPropagation()}
      >
        {/* 头部 */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200/60 bg-gradient-to-r from-blue-50 via-indigo-50/80 to-blue-50 backdrop-blur-sm">
          <div className="flex items-center gap-4">
            <div className={getRankBadge(store.rank)}>
              {store.rank}
            </div>
            <div>
              <h3 className="text-2xl font-bold text-gray-800">{store.name}</h3>
              {store.address && (
                <p className="text-sm text-gray-600 mt-1 flex items-center gap-1">
                  <Store size={14} />
                  {store.address}
                </p>
              )}
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-white/80 rounded-lg transition-all hover:scale-110 active:scale-95"
            aria-label="关闭"
          >
            <X size={22} className="text-gray-600" />
          </button>
        </div>

        {/* 内容区域 */}
        <div className="overflow-y-auto flex-1 p-6 scrollbar-thin bg-gradient-to-b from-transparent to-gray-50/30">
          {/* 指标卡片 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <EnhancedMetricCard
              title="访客数"
              value={parseFloat(store.visitors.replace('w+', '')) * 10000}
              unit="人"
              trend={{ value: parseFloat(store.rate.replace('%', '')), isUp: true }}
            />
            <EnhancedMetricCard
              title="销售额"
              value={store.sales ? store.sales : 0}
              unit="元"
              trend={{ value: 15.2, isUp: true }}
            />
            <EnhancedMetricCard
              title="订单数"
              value={store.orders ? store.orders : 0}
              unit="单"
              trend={{ value: 8.5, isUp: true }}
            />
          </div>

          {/* 访客趋势图表 */}
          <div className="bg-white/80 backdrop-blur-sm rounded-xl border border-gray-200/60 shadow-sm p-6 mb-6">
            <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
              <TrendingUp size={20} className="text-blue-600" />
              访客趋势（最近7天）
            </h4>
            <AnimatedLineChart
              data={chartData}
              lines={[
                { dataKey: 'visitors', name: '访客数', color: '#3b82f6', strokeWidth: 2 },
                { dataKey: 'sales', name: '销售额(元)', color: '#10b981', strokeWidth: 2 },
              ]}
              height={250}
              showAnimation={true}
            />
          </div>

          {/* 每日数据表格 */}
          <div className="bg-white/80 backdrop-blur-sm rounded-xl border border-gray-200/60 shadow-sm p-6">
            <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
              <CalendarDays size={20} className="text-blue-600" />
              每日数据明细
            </h4>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">日期</th>
                    <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">访客数</th>
                    <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">销售额</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {visitorTrendData.map((item, index) => (
                    <tr key={index} className="hover:bg-gray-50">
                      <td className="px-4 py-3 text-sm text-gray-900">{item.date}</td>
                      <td className="px-4 py-3 text-sm text-right text-gray-900">{item.count.toLocaleString()}</td>
                      <td className="px-4 py-3 text-sm text-right text-gray-900">¥{item.sales.toLocaleString()}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* 底部 */}
        <div className="p-4 border-t border-gray-200/60 bg-gradient-to-r from-gray-50/80 to-blue-50/40 backdrop-blur-sm">
          <div className="flex items-center justify-end gap-3">
            <button
              onClick={onClose}
              className="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
            >
              关闭
            </button>
            <button
              onClick={() => {
                console.log('查看详细报表:', store);
                onClose();
              }}
              className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
            >
              查看详细报表
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default StoreDetailModal;

